<!-- menu -->
<template>
  <crec-menu
    v-bind="settings"
    @click="menuItemClick"
  >
    <template v-for="item in menus" v-if="item.meta">
      <crec-menu-item v-if="!item.children" :key="item.path">
        <crec-icon :type="item.meta.icon" v-if="item.meta.icon"/>
        <span>{{ item.meta.title }}</span>
      </crec-menu-item>
      <crec-sub-menu v-else :key="item.path">
        <span slot="title">
          <crec-icon :type="item.meta.icon" v-if="item.meta.icon"/>
          <span>{{ item.meta.title }}</span>
        </span>
        <crec-menu-item :key="item1.path" v-for="item1 in item.children">
          <crec-icon :type="item1.meta.icon" v-if="item1.meta.icon"/>
          <span>{{ item1.meta.title }}</span>
        </crec-menu-item>
      </crec-sub-menu>
    </template>
  </crec-menu>
</template>

<script>
export default {
  name: 'BaseMenu',
  props: {
    mode: {
      required: true,
      default: 'inline',
      type: String
    },
    theme: {
      required: true,
      default: 'crec-blue',
      type: String
    },
    collapsed: {
      default: false,
      type: Boolean
    },
    menus: {
      required: true,
      default: () => [],
      type: Array
    }
  },
  data () {
    return {
      settings: {
        mode: this.mode,
        theme: this.theme
      }
    }
  },
  computed: {
  },
  created () {
    if (this.mode !== 'horizontal') {
      this.settings.inlineCollapsed = this.collapsed
    }
  },
  methods: {
    menuItemClick (obj) {
      let goPath = ''
      if (obj.keyPath.length > 1) {
        for (let i = obj.keyPath.length; i > 0; i--) {
          let itemPaht = obj.keyPath[i - 1]
          if (!(itemPaht.startsWith('/'))) {
            itemPaht = '/' + itemPaht
          }
          goPath += itemPaht
        }
      } else {
        goPath = obj.key
      }
      this.$emit('menuItemClick', Object.assign(obj, { goPath }))
    }
  }
}
</script>

<style>

</style>
